<template>
  <div ref="echartsRef" class="echartsContainer"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onBeforeUnmount, onMounted, ref } from "vue";

const echartsRef = ref<HTMLDivElement>();

let myChart = ref<echarts.ECharts>();
onMounted(() => {
  initEcharts();
  window.addEventListener("resize", handleWinResize);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", handleWinResize);
});

const handleWinResize = () => {
  myChart.value && myChart.value.resize();
};

const initEcharts = () => {
  myChart.value = echarts.init(echartsRef.value);
  updateOptions();
};

const updateOptions = () => {
  const data = [];
  for (let i = 0; i < 24; i++) {
    data.push({
      name: `${i}:00-${i + 1}:00`,
      value: Math.random() * 1000,
    });
  }
  myChart.value?.setOption({
    tooltip: {
      // trigger: "axis",
      // axisPointer: {
      //   type: "shadow",
      // },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: data.map((e) => e.name),
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          interval: 4,
        },
        axisLine: {
          lineStyle: {
            color: "#ccc",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        splitLine: {
          lineStyle: {
            type: [5, 5],
          },
        },
      },
    ],
    series: [
      {
        name: "Direct",
        type: "bar",
        barWidth: 10,
        data: data.map((e) => e.value),
        itemStyle: {
          color: "#167cf3",
        },
      },
    ],
  });
};
</script>

<style scoped lang="scss">
.echartsContainer {
  width: 100%;
  height: 400px;
  background-color: #fff;
}
</style>
